<template>
	<view style="padding: 20px 0;">
		<view v-if="list.length==0" style="text-align: center; margin-top: 10px;">
			暂无审批
		</view>
		<view class="list" v-for="item in list" :key="item.applicationId">
			<view>
				<view style="text-align: center; margin-bottom: 20px;">
					{{item.groupName}}-{{item.position}}-{{item.name}}
				</view>
				<view>
					请假类型：{{item.type}}
				</view>
				<view>
					备注：{{item.notes}}
				</view>
				<view>
					开始时间：{{DateUtil(item.beginTime)}}
				</view>
				<view>
					结束时间：{{DateUtil(item.endTime)}}
				</view>
			</view>

			<!-- 间隔线 -->
			<u-line style="margin-top: 5px;"></u-line>

			<view class="change">
				<view class="d">
					备注：
				</view>
				<input class="choose" type="text" @input="changeNotes">
			</view>

			<view class="button">
				<view class="yes" @click="yes(item.approveId)">
					通过
				</view>
				<view class="no" @click="no(item.approveId)">
					驳回
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				notes: ""
			};
		},
		onLoad() {
			this.getApprove()
		},
		methods: {
			DateUtil(e) {
				const date = new Date(e);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			changeNotes(e) {
				this.notes = e.detail.value
			},
			getApprove() {
				uni.request({
					url: getApp().url + 'approve/getApprove',
					data: {
						enterpriseId: uni.getStorageSync("enterprise").enterpriseId,
						userId: uni.getStorageSync("userId")
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.list = response.data.data
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			yes(e) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定通过吗？',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: getApp().url + 'approve/updateApprove',
								data: {
									approveId: e,
									pass: 1,
									notes:that.notes
								},
								header: {
									token: uni.getStorageSync("token")
								},
								method: "POST",
								success: (response) => {
									if (response.data.code == -1) {
										return uni.showToast({
											icon: "error",
											title: response.data.msg
										});
									};
									that.getApprove()
								},
								fail: (error) => {
									console.log(error);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			no(e) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定驳回吗？',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: getApp().url + 'approve/updateApprove',
								data: {
									approveId: e,
									pass: 2,
									notes:that.notes
								},
								header: {
									token: uni.getStorageSync("token")
								},
								method: "POST",
								success: (response) => {
									if (response.data.code == -1) {
										return uni.showToast({
											icon: "error",
											title: response.data.msg
										});
									};
									that.getApprove()
								},
								fail: (error) => {
									console.log(error);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.list {
		margin: 5vw;
		padding: 5vw;
		border-radius: 10px;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

		.change {
			margin-top: 20px;
			height: 40px;
			display: flex;
			
			.d{
			
				height: 40px;
				line-height: 40px;
			}

			.choose {
				width: 80%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			}

		}

		.button {
			display: flex;
			justify-content: space-around;
			margin-top: 20px;
			color: #FFF;

			.yes {
				width: 40%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 10px;
				background-color: #41A863;
			}

			.no {
				width: 40%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 10px;
				background-color: red;
			}
		}
	}
</style>